import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, DatePicker, Form, Input, Modal, Row, Select, Table } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const data = [
  {
    time: '2023-11-10',
    name: '莫叶香',
    idNo: 'xxxxxx',
    source: '手工创建',
    caseType: '卖淫',
    result: '疑似余罪',
  },
  {
    time: '2023-11-10',
    name: '莫叶香',
    idNo: 'xxxxxx',
    source: '手工创建',
    caseType: '组织卖淫',
    result: '疑似余罪',
  },
  {
    time: '2023-11-29',
    name: '莫叶香',
    idNo: 'xxxxxx',
    source: '自动核验',
    caseType: '危险驾驶',
    result: '疑似余罪',
  },
  {
    time: '2023-10-28',
    name: '莫叶香',
    idNo: 'xxxxxx',
    source: '自动核验',
    caseType: '盗窃',
    result: '证据挖掘',
  },
  {
    time: '2024-4-10',
    name: '刘XX(导入)',
    idNo: 'xxxxxx',
    source: '自动核验',
    caseType: '嫖娼',
    result: '暂无结果',
  },
];

export default () => {
  const [addModalOpen, setAddModalOpen] = useState(false);
  const navigate = useNavigate();

  const columns = [
    {
      title: '核验时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '核验对象',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '证件编号',
      dataIndex: 'idNo',
      key: 'idNo',
    },
    {
      title: '任务来源',
      dataIndex: 'source',
      key: 'source',
    },
    {
      title: '案件类型',
      dataIndex: 'caseType',
      key: 'caseType',
    },
    {
      title: '核验结果',
      dataIndex: 'result',
      key: 'result',
      render: (_) => {
        if (_ === '暂无结果') return _;
        return <div className="red">{_}</div>;
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: () => {
        return (
          <div>
            <Button
              type="primary"
              onClick={() => {
                navigate('/cases/result');
              }}
            >
              详情
            </Button>
          </div>
        );
      },
    },
  ];

  return (
    <PageContainer>
      <Modal
        open={addModalOpen}
        title="创建核验任务"
        okText="创建"
        cancelText="取消"
        onCancel={() => setAddModalOpen(false)}
      >
        <Form labelCol={{ span: 6 }}>
          <Form.Item label="对象姓名">
            <Input></Input>
          </Form.Item>
          <Form.Item label="证件类型">
            <Select></Select>
          </Form.Item>
          <Form.Item label="证件编号">
            <Input></Input>
          </Form.Item>
          <Form.Item label="人员编号">
            <Input></Input>
          </Form.Item>
          <Form.Item label="核验范围">
            <DatePicker.RangePicker></DatePicker.RangePicker>
          </Form.Item>
        </Form>
      </Modal>
      <div>
        <Card title="核验历史">
          <Form labelCol={{ span: 6 }}>
            <Row>
              <Col span={8}>
                <Form.Item label="核验时间">
                  <DatePicker.RangePicker></DatePicker.RangePicker>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="人员姓名">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <Form.Item label="核验结果">
                  <Select defaultValue={'1'}>
                    <Select.Option value="1">疑似余罪</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="人员编号">
                  <Input></Input>
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <Form.Item label="任务来源">
                  <Select defaultValue={'1'}>
                    <Select.Option value="1">手工创建</Select.Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="证件号码">
                  <Input></Input>
                </Form.Item>
              </Col>
              <Col span={2}></Col>
              <Col span={6} className="f-end">
                <Button onClick={() => setAddModalOpen(true)}>手工创建</Button>
                <Button type="primary" className="ml10">
                  搜索
                </Button>
              </Col>
            </Row>
          </Form>

          <Table columns={columns} dataSource={data}></Table>
        </Card>
      </div>
    </PageContainer>
  );
};
